import React, {Component} from "react";
import {View, TouchableOpacity, Alert, StyleSheet,TextInput, Dimensions, Modal, Text, Image} from "react-native";


import Separator from "../Separator";
import {CommonTextButton} from '../CustomButton'
import Tips from 'react-native-root-tips'
import ClosableModal  from 'rn-closable-modal'

const {width, height} = Dimensions.get('window');

type Props = {
    show:boolean,
    closeModal:Function,
    confirmPress:Function,
}

export default class JoinShopAlertDialog extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.show,
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({isVisible: nextProps.show});
    }

    closeModal=()=> {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
    }

    confirm(){

        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
        this.props.confirmPress()
    }
    cancel(){
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
    }

    render() {

        return (
            <View style={{flex: 1}}>
                <ClosableModal
                    animationType='fade'
                    show={this.state.isVisible}
                    onClose={this.closeModal}
                    transparent={true}
                    overlayColor={"rgba(255,255,255,0.5)"}>
                    <View style={{alignItems:"center"}}>
                        <Image style={{width:51,height:51,alignItems:'center',position:'relative',borderRadius:25.5}}
                               source={require('../../../res/img/dialog/tanhao.png')}/>
                        <View style={{marginTop:-25}}>
                            <View style={styles.mymodal}>
                                <View style={styles.control_btn}>
                                    <Text style={styles.inputTitle}>订单已加入购物车</Text>
                                    <Text style={styles.inputContent}>THE ORDER HAS BEEN ADDED TO THE SHOPPING CART</Text>
                                    <View
                                        style={{flexDirection:'row',marginTop:18,alignItems:'center',justifyContent:'center'}}>

                                        <TouchableOpacity ref='cancel_btn' style={styles.touch_select_opacity}
                                                          onPress={() => this.confirm()}>
                                            <Text style={styles.touch_un_select_text}>去订单支付</Text>
                                        </TouchableOpacity>

                                        <TouchableOpacity ref='confirm_btn' style={styles.touch_un_select_opacity}
                                                          onPress={() => this.cancel()}>
                                            <Text style={styles.touch_select_text}>取消</Text>
                                        </TouchableOpacity>

                                    </View>
                                </View>
                            </View>
                        </View>
                        <Image style={{width:51,height:51,alignItems:'center',position:'absolute',borderRadius:25.5}}
                               source={require('../../../res/img/dialog/tanhao.png')}/>
                    </View>
                </ClosableModal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        justifyContent:'center',
        alignItems:'center',
    },

    white_background:{
        width:331,
        height:148,
        backgroundColor:'white',
        borderRadius:4,
        alignItems:'center',
    },
    mymodal: {
        backgroundColor: '#DB3843',
        height: 150,
        width: 260,
        alignItems: 'center',
        borderRadius: 20,
        position: 'relative'
    },
    inputTitle: {
        color: 'white',
        alignItems: 'center',
        fontSize: 13,
        fontWeight: 'bold',
        textAlign: 'center',
        justifyContent: 'center',
        marginTop: 8
    },
    inputContent: {
        color: '#767474',
        textAlign: 'center',
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 9,
        marginTop:5,
    },
    control_btn: {
        backgroundColor: '#2B3543',
        height: 115,
        width: 261,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
        marginTop: 35
    },
    touch_un_select_opacity: {
        width: 110,
        marginLeft: 3,
        backgroundColor: '#252E3B',
        height: 34,
        borderRadius: 20,
        borderWidth: 1,
        borderColor: '#353D49',
        alignItems: 'center',
        justifyContent: 'center',
    },
    touch_un_select_text: {
        color: 'white',
        fontSize: 11,
    },
    touch_select_opacity: {
        width: 110,
        marginLeft: 3,
        backgroundColor: '#DB3843',
        height: 34,
        borderRadius: 20,
        borderWidth: 1,
        borderColor: '#DB3843',
        alignItems: 'center',
        justifyContent: 'center',
    },
    touch_select_text: {
        color: '#FAFAFA',
        fontSize: 11,
    },
});